<template>
    <div id="login" @keyup.enter="submitForm('ruleForm')">
        <div class="login_box">
      <div class="login">
          <div class="login_name">
               <p>运维管控系统</p>
          </div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="用户名" prop="username">
    <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="ruleForm.password" autocomplete="off" ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
      </div>

</div>
    </div>
</template>
<script>
  export default {
    data() {
      var validateName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'));
        } else {
          if (this.ruleForm.username !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }  else {
          callback();
        }
      };
      return {
        ruleForm: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { validator: validateName, trigger: 'blur' }
          ],
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],

        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios({
                method:"post",
                url:"/user/login.action",
                data:this.ruleForm
            }).then(res=>{
                if(res.data.status){
                 let userRole = res.data.content.loginResult.role;
                 let role_list = res.data.content.loginResult.role_list;
                 let userid = res.data.content.loginResult.user_id;
                 let username = res.data.content.loginResult.username;
                 let logSwitch = res.data.content.loginResult.logSwitch;
                    // console.log(userid);
                    // console.log('userRole',userRole)
                    // console.log('roleList',role_list)
                 sessionStorage.setItem("userRole",userRole);
                 sessionStorage.setItem("roleList",role_list);
                 sessionStorage.setItem("userid",userid);
                 sessionStorage.setItem("username",username);
                 sessionStorage.setItem("logSwitch",logSwitch);
                 this.$router.push("/sysDescription")
                  // console.log( sessionStorage.getItem("role"));
             }else{
                 this.$message({
                   showClose: true,
                    message: '用户名或密码错误，请重新输入',
                     type: 'error'
                 })
             }
            }).catch((err)=>{
                this.$message({
                    duration: 2000,
                    message: err,
                    type: 'error'
                })
                console.log(err);
            })
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
  }
</script>
<style scoped>

body, html { height:100%; overflow:hidden; }
#login { background:#93defe !important; background-size: cover;height: 100%; }
.demo-ruleForm{
    margin-left: -40px;
}
.login_box{
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    }
.login_box .login_l_img{ float:left; width:432px; height:440px; margin-left:50px;}
.login_box .login_l_img img{width:500px; height:440px; }
.login {height:360px; width:400px; padding:50px; background-color: #ffffff;border-radius:6px;box-sizing: border-box; float:right; margin-right:50px; position:relative; margin-top:50px;}
.login_logo{ width:120px; height:120px; border:5px solid #93defe;border-radius:100px; background:#fff; text-align:center; line-height:110px; position:absolute; top:-60px; right:140px;}
.login_name{ width:100%; float:left; text-align:center; margin-top:0px;}
.login_name p{ width:100%; text-align:center; font-size:18px; color:#444; padding:10px 0 20px;}
.login_logo img{ width:60px; height:60px;display: inline-block; vertical-align: middle;}




</style>
